<template>
  <div class="todos-container">
    <el-card shadow="never" class="header-card">
      <div class="page-header">
        <div class="header-content">
          <el-icon class="header-icon" :size="28"><Memo /></el-icon>
          <div class="header-text">
            <h2>待办事项</h2>
            <p>高效管理你的待办清单</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button-group>
            <el-button type="primary">
              <el-icon><List /></el-icon>
              列表视图
            </el-button>
            <el-button @click="$router.push('/office/todo-board')">
              <el-icon><Grid /></el-icon>
              看板视图
            </el-button>
          </el-button-group>
          <el-button type="primary" @click="handleNewTodo" style="margin-left: 10px;">
            <el-icon><Plus /></el-icon>
            新建待办
          </el-button>
          <el-button @click="showQuickAdd = !showQuickAdd" style="margin-left: 10px;">
            <el-icon><Plus /></el-icon>
            快速添加
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 快速添加 -->
    <el-card shadow="never" v-if="showQuickAdd" class="quick-add-card">
      <el-input
        v-model="quickAddText"
        placeholder="输入待办事项，按回车添加，或点击麦克风使用语音输入"
        @keyup.enter="handleQuickAdd"
        clearable
        size="large"
      >
        <template #prepend>
          <el-icon><Edit /></el-icon>
        </template>
        <template #suffix>
          <div
            class="voice-icon-trigger"
            @click="handleVoiceIconClick"
            :class="{ 'recording': isVoiceRecording }"
            :title="isVoiceRecording ? '正在录音中...' : '点击开始语音输入'"
          >
            <el-icon :size="18">
              <Microphone />
            </el-icon>
          </div>
        </template>
        <template #append>
          <el-button @click="handleQuickAdd" type="primary">
            <el-icon><Plus /></el-icon>
            添加
          </el-button>
        </template>
      </el-input>
    </el-card>

    <!-- 语音输入组件（全屏遮罩层模式） -->
    <VoiceTodoInput
      ref="voiceInputRef"
      mode="float"
      :show-quick-add="true"
      @parse-complete="handleVoiceTodoCreate"
      @recording-start="handleRecordingStart"
      @recording-stop="handleRecordingStop"
    />

    <!-- 统计卡片 -->
    <div class="stats-row">
      <el-card shadow="hover" class="stat-card" @click="filterStatus = ''">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#409EFF"><List /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.total }}</div>
            <div class="stat-label">全部待办</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card" @click="filterStatus = 'pending'">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#E6A23C"><Clock /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.pending }}</div>
            <div class="stat-label">待处理</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card" @click="filterStatus = 'completed'">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#67C23A"><CircleCheck /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.completed }}</div>
            <div class="stat-label">已完成</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#909399"><TrendCharts /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ completionRate }}%</div>
            <div class="stat-label">完成率</div>
          </div>
        </div>
      </el-card>
    </div>

    <el-row :gutter="20">
      <!-- 左侧分类 -->
      <el-col :span="5">
        <el-card shadow="never" class="category-card">
          <div class="category-header">
            <span>分类</span>
            <el-button link type="primary" @click="showCategoryDialog = true">
              <el-icon><Plus /></el-icon>
            </el-button>
          </div>
          <el-menu :default-active="currentCategory" @select="handleCategoryChange">
            <el-menu-item index="all">
              <el-icon><Memo /></el-icon>
              <span>全部待办</span>
              <el-badge :value="stats.total" :hidden="stats.total === 0" class="badge-inline" />
            </el-menu-item>
            <el-menu-item index="today">
              <el-icon><Calendar /></el-icon>
              <span style="margin-right: 8px;">今天</span>
              <span :value="todayCount" :hidden="todayCount === 0" class="badge-inline" type="warning" />
            </el-menu-item>
            <el-menu-item index="important">
              <el-icon><StarFilled /></el-icon>
              <span>重要</span>
            </el-menu-item>
            <el-divider />
            <el-menu-item
              v-for="cat in categories"
              :key="cat.id"
              :index="cat.id.toString()"
            >
              <el-icon :style="{ color: cat.color }"><Collection /></el-icon>
              <span>{{ cat.name }}</span>
              <el-badge :value="cat.count" :hidden="cat.count === 0" class="badge-inline" />
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>

      <!-- 右侧待办列表 -->
      <el-col :span="19">
        <el-card shadow="never">
          <!-- 工具栏 -->
          <div class="toolbar">
            <div class="toolbar-left">
              <el-radio-group v-model="viewFilter" @change="handleFilterChange">
                <el-radio-button label="all">全部</el-radio-button>
                <el-radio-button label="pending">未完成</el-radio-button>
                <el-radio-button label="completed">已完成</el-radio-button>
              </el-radio-group>
            </div>
            <div class="toolbar-right">
              <el-select v-model="sortBy" placeholder="排序" style="width: 150px">
                <el-option label="创建时间" value="createTime" />
                <el-option label="截止时间" value="dueDate" />
                <el-option label="优先级" value="priority" />
              </el-select>
              <el-button @click="handleClearCompleted" v-if="stats.completed > 0">
                清除已完成
              </el-button>
            </div>
          </div>

          <!-- 待办列表 -->
          <div class="todos-list">
            <transition-group name="list">
              <div
                v-for="todo in filteredTodos"
                :key="todo.id"
                :class="['todo-item', { 'completed': todo.completed, 'overdue': isOverdue(todo) }]"
              >
                <div class="todo-main">
                  <el-checkbox
                    v-model="todo.completed"
                    @change="handleToggleComplete(todo)"
                    :size="todo.important ? 'large' : 'default'"
                  />
                  <div class="todo-content" @click="handleEditTodo(todo)">
                    <div class="todo-title">
                      <el-icon v-if="todo.important" color="#F7BA2A"><StarFilled /></el-icon>
                      <span :class="{ 'completed-text': todo.completed }">{{ todo.title }}</span>
                    </div>
                    <div class="todo-meta">
                      <el-tag v-if="todo.categoryName" size="small" :color="todo.categoryColor" effect="plain">
                        {{ todo.categoryName }}
                      </el-tag>
                      <el-tag v-if="todo.priority !== 'normal'" size="small" :type="getPriorityType(todo.priority)">
                        {{ getPriorityName(todo.priority) }}
                      </el-tag>
                      <span v-if="todo.dueDate" class="due-date" :class="{ 'overdue-text': isOverdue(todo) }">
                        <el-icon><Clock /></el-icon>
                        {{ formatDueDate(todo.dueDate) }}
                      </span>
                      <span v-if="todo.description" class="description">{{ todo.description }}</span>
                    </div>
                  </div>
                </div>
                <div class="todo-actions">
                  <el-button
                    link
                    :type="todo.important ? 'warning' : 'info'"
                    @click="handleToggleImportant(todo)"
                  >
                    <el-icon><StarFilled v-if="todo.important" /><Star v-else /></el-icon>
                  </el-button>
                  <el-button link type="primary" @click="handleEditTodo(todo)">
                    <el-icon><Edit /></el-icon>
                  </el-button>
                  <el-button link type="danger" @click="handleDeleteTodo(todo)">
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </div>
              </div>
            </transition-group>

            <el-empty v-if="filteredTodos.length === 0" :description="emptyText" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 编辑待办对话框 -->
    <TodoEditDialog
      v-model="showEditDialog"
      :todo="currentTodo"
      :categories="categories"
      @save="handleSaveTodo"
      @cancel="handleCancelEdit"
    />

    <!-- 新建分类对话框 -->
    <el-dialog v-model="showCategoryDialog" title="新建分类" width="400px">
      <el-form :model="categoryForm" label-width="80px">
        <el-form-item label="分类名称">
          <el-input v-model="categoryForm.name" placeholder="请输入分类名称" />
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker v-model="categoryForm.color" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showCategoryDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSaveCategory">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Memo, Plus, Edit, List, Clock, CircleCheck, TrendCharts, Calendar,
  StarFilled, Star, Collection, Delete, Grid, Microphone
} from '@element-plus/icons-vue'
import VoiceTodoInput from '@/components/common/VoiceTodoInput.vue'
import TodoEditDialog from './components/TodoEditDialog.vue'
import { keyUser, valueUser } from '@/api/data'

// 状态
const showQuickAdd = ref(false)
const quickAddText = ref('')
const currentCategory = ref('all')
const viewFilter = ref('all')
const sortBy = ref('createTime')
const filterStatus = ref('')

// 语音输入组件引用
const voiceInputRef = ref(null)
const isVoiceRecording = ref(false)

// 处理语音图标点击
const handleVoiceIconClick = () => {
  if (voiceInputRef.value) {
    if (isVoiceRecording.value) {
      voiceInputRef.value.stopRecording()
    } else {
      voiceInputRef.value.startRecording()
    }
  }
}

// 处理录音开始
const handleRecordingStart = () => {
  isVoiceRecording.value = true
  // 录音开始时可以显示快速添加面板
  if (!showQuickAdd.value) {
    showQuickAdd.value = true
  }
}

// 处理录音停止
const handleRecordingStop = () => {
  isVoiceRecording.value = false
}

// 处理语音创建的todo
const handleVoiceTodoCreate = (parsedTodo, originalText) => {
  // 如果解析的标题为空，使用原始文本
  if (!parsedTodo.title || parsedTodo.title.trim() === '') {
    parsedTodo.title = originalText.trim() || '新待办事项'
  }
  showQuickAdd.value = false;

  // 匹配分类ID
  if (parsedTodo.categoryName) {
    const category = categories.value.find(c => c.name === parsedTodo.categoryName)
    if (category) {
      parsedTodo.categoryId = category.id
      parsedTodo.categoryColor = category.color
    }
  }

  // 创建todo
  const newTodo = {
    id: Date.now(),
    title: parsedTodo.title,
    description: parsedTodo.description || '',
    categoryId: parsedTodo.categoryId || null,
    categoryName: parsedTodo.categoryName || '',
    categoryColor: parsedTodo.categoryColor || '',
    priority: parsedTodo.priority || 'normal',
    dueDate: parsedTodo.dueDate ? parsedTodo.dueDate.toLocaleString() : null,
    reminder: parsedTodo.reminder || 'none',
    important: parsedTodo.important || false,
    completed: false,
    createTime: new Date().toLocaleString()
  }

  todos.value.unshift(newTodo)
  updateStats()
  updateCategoryCounts()
  saveTodos()
  
  ElMessage.success({
    message: `语音添加成功：${parsedTodo.title}`,
    duration: 2000
  })
}


// 统计数据
const stats = reactive({
  total: 0,
  pending: 0,
  completed: 0
})

// 分类数据
const categories = ref([
  { id: 1, name: '工作', color: '#409EFF', count: 0 },
  { id: 2, name: '生活', color: '#67C23A', count: 0 },
  { id: 3, name: '学习', color: '#E6A23C', count: 0 }
])

// 待办数据
const todos = ref([])

// 加载待办数据
const loadTodos = async () => {
  try {
    const response = await keyUser('todos')
    if (response && response.data) {
      const data = typeof response.data === 'string' ? JSON.parse(response.data) : response.data
      todos.value = data.todos || []
      categories.value = data.categories || categories.value
      updateStats()
      updateCategoryCounts()
    }
  } catch (error) {
    console.error('加载待办数据失败:', error)
    ElMessage.error('加载待办数据失败')
  }
}

// 保存待办数据
const saveTodos = async () => {
  try {
    const dataToSave = {
      todos: todos.value,
      categories: categories.value
    }
    await valueUser('todos', JSON.stringify(dataToSave))
  } catch (error) {
    console.error('保存待办数据失败:', error)
    ElMessage.error('保存待办数据失败')
  }
}

// 更新统计数据
const updateStats = () => {
  stats.total = todos.value.length
  stats.pending = todos.value.filter(t => !t.completed).length
  stats.completed = todos.value.filter(t => t.completed).length
}

// 更新分类计数
const updateCategoryCounts = () => {
  categories.value.forEach(cat => {
    cat.count = todos.value.filter(t => t.categoryId === cat.id && !t.completed).length
  })
}

// 对话框
const showEditDialog = ref(false)
const showCategoryDialog = ref(false)
const currentTodo = ref(null)

const categoryForm = reactive({
  name: '',
  color: '#409EFF'
})

// 计算属性
const completionRate = computed(() => {
  if (stats.total === 0) return 0
  return Math.round((stats.completed / stats.total) * 100)
})

const todayCount = computed(() => {
  const today = new Date().toISOString().split('T')[0]
  return todos.value.filter(t => 
    !t.completed && t.dueDate && t.dueDate.startsWith(today)
  ).length
})

const filteredTodos = computed(() => {
  let result = todos.value

  // 分类筛选
  if (currentCategory.value === 'today') {
    const today = new Date().toISOString().split('T')[0]
    result = result.filter(t => t.dueDate && t.dueDate.startsWith(today))
  } else if (currentCategory.value === 'important') {
    result = result.filter(t => t.important)
  } else if (currentCategory.value !== 'all') {
    result = result.filter(t => t.categoryId === parseInt(currentCategory.value))
  }

  // 状态筛选
  if (viewFilter.value === 'pending') {
    result = result.filter(t => !t.completed)
  } else if (viewFilter.value === 'completed') {
    result = result.filter(t => t.completed)
  }

  // 排序
  result.sort((a, b) => {
    if (sortBy.value === 'createTime') {
      return new Date(b.createTime) - new Date(a.createTime)
    } else if (sortBy.value === 'dueDate') {
      if (!a.dueDate) return 1
      if (!b.dueDate) return -1
      return new Date(a.dueDate) - new Date(b.dueDate)
    } else if (sortBy.value === 'priority') {
      const priorityOrder = { urgent: 0, high: 1, normal: 2, low: 3 }
      return priorityOrder[a.priority] - priorityOrder[b.priority]
    }
    return 0
  })

  return result
})

const emptyText = computed(() => {
  if (viewFilter.value === 'completed') return '还没有已完成的待办'
  if (currentCategory.value === 'today') return '今天没有待办事项'
  if (currentCategory.value === 'important') return '没有重要的待办事项'
  return '暂无待办事项，添加一个吧！'
})

// 方法
const handleQuickAdd = () => {
  if (!quickAddText.value.trim()) return
  
  const newTodo = {
    id: Date.now(),
    title: quickAddText.value.trim(),
    description: '',
    categoryId: null,
    categoryName: '',
    categoryColor: '',
    priority: 'normal',
    dueDate: null,
    reminder: 'none',
    important: false,
    completed: false,
    createTime: new Date().toLocaleString()
  }
  
  todos.value.unshift(newTodo)
  quickAddText.value = ''
  updateStats()
  updateCategoryCounts()
  saveTodos()
  ElMessage.success('添加成功')
}

const handleNewTodo = () => {
  currentTodo.value = null
  showEditDialog.value = true
}

const handleCategoryChange = (key) => {
  currentCategory.value = key
}

const handleFilterChange = () => {
  console.log('筛选变化', viewFilter.value)
}

const handleToggleComplete = (todo) => {
  updateStats()
  updateCategoryCounts()
  saveTodos()
  ElMessage.success(todo.completed ? '已完成' : '标记为未完成')
}

const handleToggleImportant = (todo) => {
  todo.important = !todo.important
  saveTodos()
  ElMessage.success(todo.important ? '已标记为重要' : '取消重要标记')
}

const handleEditTodo = (todo) => {
  currentTodo.value = todo
  showEditDialog.value = true
}

const handleDeleteTodo = (todo) => {
  ElMessageBox.confirm('确定要删除这个待办事项吗？', '提示', {
    type: 'warning'
  }).then(() => {
    const index = todos.value.findIndex(t => t.id === todo.id)
    if (index > -1) {
      todos.value.splice(index, 1)
      updateStats()
      updateCategoryCounts()
      saveTodos()
      ElMessage.success('删除成功')
    }
  }).catch(() => {})
}

const handleSaveTodo = (formData) => {
  if (currentTodo.value) {
    // 更新
    Object.assign(currentTodo.value, formData)
    
    // 更新分类信息
    if (formData.categoryId) {
      const cat = categories.value.find(c => c.id === formData.categoryId)
      if (cat) {
        currentTodo.value.categoryName = cat.name
        currentTodo.value.categoryColor = cat.color
      }
    } else {
      currentTodo.value.categoryName = ''
      currentTodo.value.categoryColor = ''
    }
    
    updateStats()
    updateCategoryCounts()
    saveTodos()
    ElMessage.success('更新成功')
  } else {
    // 新建
    const newTodo = {
      id: Date.now(),
      ...formData,
      completed: false,
      createTime: new Date().toLocaleString()
    }
    
    // 添加分类信息
    if (formData.categoryId) {
      const cat = categories.value.find(c => c.id === formData.categoryId)
      if (cat) {
        newTodo.categoryName = cat.name
        newTodo.categoryColor = cat.color
      }
    }
    
    todos.value.unshift(newTodo)
    updateStats()
    updateCategoryCounts()
    saveTodos()
    ElMessage.success('添加成功')
  }
  
  currentTodo.value = null
}

const handleCancelEdit = () => {
  currentTodo.value = null
}

const handleClearCompleted = () => {
  ElMessageBox.confirm('确定要清除所有已完成的待办吗？', '提示', {
    type: 'warning'
  }).then(() => {
    todos.value = todos.value.filter(t => !t.completed)
    updateStats()
    updateCategoryCounts()
    saveTodos()
    ElMessage.success('清除成功')
  }).catch(() => {})
}

const handleSaveCategory = () => {
  if (!categoryForm.name.trim()) {
    ElMessage.warning('请输入分类名称')
    return
  }
  
  categories.value.push({
    id: Date.now(),
    name: categoryForm.name,
    color: categoryForm.color,
    count: 0
  })
  
  categoryForm.name = ''
  categoryForm.color = '#409EFF'
  showCategoryDialog.value = false
  updateCategoryCounts()
  saveTodos()
  ElMessage.success('分类创建成功')
}

const isOverdue = (todo) => {
  if (!todo.dueDate || todo.completed) return false
  return new Date(todo.dueDate) < new Date()
}

const formatDueDate = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  const today = new Date()
  const tomorrow = new Date(today)
  tomorrow.setDate(tomorrow.getDate() + 1)
  
  const dateOnly = date.toISOString().split('T')[0]
  const todayOnly = today.toISOString().split('T')[0]
  const tomorrowOnly = tomorrow.toISOString().split('T')[0]
  
  if (dateOnly === todayOnly) {
    return '今天 ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  } else if (dateOnly === tomorrowOnly) {
    return '明天 ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  }
  return date.toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
}

const getPriorityName = (priority) => {
  const map = { low: '低', normal: '普通', high: '高', urgent: '紧急' }
  return map[priority] || priority
}

const getPriorityType = (priority) => {
  const map = { low: 'info', normal: '', high: 'warning', urgent: 'danger' }
  return map[priority] || ''
}

// 页面挂载时加载数据
onMounted(() => {
  loadTodos()
})
</script>

<style scoped>
.todos-container {
  padding: 10px;
}

.header-card {
  margin-bottom: 10px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.quick-add-card {
  margin-bottom: 20px;
}

/* 语音图标触发器 */
.voice-icon-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 50%;
  color: #909399;
}

.voice-icon-trigger:hover {
  background-color: rgba(64, 158, 255, 0.1);
  color: #409EFF;
}

.voice-icon-trigger.recording {
  color: #f56c6c;
}

.voice-icon-trigger.recording .el-icon {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.stat-card {
  cursor: pointer;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.category-card {
  height: auto;
  overflow: visible;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-weight: 500;
  font-size: 16px;
}

.badge {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.badge-inline {
  margin-left: 8px;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
}

:deep(.el-menu-item) {
  position: relative;
  display: flex;
  align-items: center;
}

:deep(.el-menu-item[index="today"]) {
  padding-right: 20px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.toolbar-right {
  display: flex;
  gap: 10px;
}

.todos-list {
  min-height: 400px;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px;
  border-bottom: 1px solid #EBEEF5;
  transition: all 0.3s;
}

.todo-item:hover {
  background-color: #f5f7fa;
}

.todo-item.completed {
  opacity: 0.6;
}

.todo-item.overdue {
  border-left: 3px solid #F56C6C;
}

.todo-main {
  display: flex;
  gap: 12px;
  flex: 1;
}

.todo-content {
  flex: 1;
  cursor: pointer;
}

.todo-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
}

.completed-text {
  text-decoration: line-through;
  color: #909399;
}

.todo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: #909399;
}

.due-date {
  display: flex;
  align-items: center;
  gap: 4px;
}

.overdue-text {
  color: #F56C6C;
}

.description {
  color: #606266;
}

.todo-actions {
  display: flex;
  gap: 4px;
}

.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

.list-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

</style>

